<template>
  <li>
    <div class="shownew">
      <i v-if="hasChild" class="iconfont" @click="toggle(model)"  v-bind:class="[open ? 'icon-jinru iconfontss': 'icon-jinru']"></i>
      <i v-if="!hasChild" class="icon file-text" @click="toggle(model)"></i>
      <span @click="changemsg(model)" class="newmsgclass">{{model.deptName}}</span>
    </div>
    <ul v-show="open" v-if="hasChild" class="showul">
      <treemenu1 v-for="(item,index) in model.children"  v-bind:model="item" v-bind:key="index"></treemenu1>
    </ul>

  </li>
</template>

<script>
  export default {
    name: 'treemenu1',
    props: ['model'],
    data () {
      return {
        open: false,
        index: 0,
        memberWork: ''
      }
    },
    computed: {
      hasChild () {
        return this.model.children && this.model.children.length
      }
    },
    mounted () {
      this.type = this.$route.query.type
      this.memberWork = this.$route.query.memberWork
      this.index = this.$route.query.index
    },
    methods: {
      toggle () {
        if (this.hasChild) {
          this.open = !this.open
        }
      },
      changemsg () {
          // 最后一层级单位可选
        //   if(this.model.type==1||this.model.type==2||!this.model.type){
        //      return false;
        //   }
          this.$store.state.workrist1 = !this.$store.state.workrist1
          this.$store.state.companyworklist = Object.assign({}, this.$store.state.companyworklist, {
                FireSquadid: this.model.deptId, //	String		作业班组id
                FireSquad: this.model.deptName, //	String		作业单位
                GroupPerson: this.model.DutyPerson //	String		作业班长
            })
            this.$store.state.companyworklist.GroupPersonid = '';
      }
    }
  }
</script>

<style>
  .showul {
    list-style: none;
     padding-left:20px;
  }
   .showul:last-child{

   }
  li {
    padding: 3px 0;
  }
   li:first-child{
   }
  li > span {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
  }

  i.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
  }

  .icon.folder {
  }

  .icon.folder-open {
  }

  .icon.file-text {
  }

  .tree-menu li {
    line-height: 3;
  }
  .iconfont{
    margin-right:5px;
  }
  .iconfont.iconfontss{
    display:inline-block;
    transform:rotate(90deg);
  }
  .shownew{
        overflow: hidden;
    height: 40px;
    padding-right: 20px;
        display: flex;
            align-items: center;
  }
  .newmsgclass{
        display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    overflow: hidden;

  }
</style>
